<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import qs from "qs";

document.title = "桃丽丝研究所 - 模型中心 - 用户管理";
const userList = ref([])
const qq = ref("")
const totalUser = ref(userList.value.length);
// 当前页码，默认为第一页
const currentPage = ref(1);
// 每页显示的条数，默认10
const pageSize = ref(10);
// 页面分页改变时的处理函数
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  getUserList()
};
const getUserList = async () => {
  let res;
  try {
    if (qq.value){
      res = await axios.get("/api/user/list", {
        params: {
          qq: qq.value,
          page: currentPage.value,
          pageSize: pageSize.value
        }
      })
      userList.value = res.data.data
      return
    }else {
      res = await axios.get("/api/user/list",{
        params: {
          page: currentPage.value,
          pageSize: pageSize.value
        }
      })
    }

    userList.value = res.data.data
  } catch (e) {
    ElMessage.error(`服务器错误!请与管理员联系！错误: ${e.message}`)
  }
}

const handleBan = (index, row) => {
  console.log("准备显示确认对话框");
  ElMessageBox.confirm(`确定封禁用户 ${row.UName} 吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    console.log("用户点击了确定");
    return axios.post("/api/user/ban", qs.stringify({
      uId: row.UId
    }));
  }).then(res => {
    console.log("封禁请求完成", res);
    if (res.data.code === 200) {
      ElMessage.success("封禁成功！！");
      getUserList();
    } else {
      ElMessage.error("封禁失败！请联系管理员处理！");
    }
  }).catch(error => {
    console.error("封禁请求出错", error);
    ElMessage.info("已取消封禁操作！");
  }).catch(() => {
    console.log("用户点击了取消");
    ElMessage.info("已取消封禁操作！");
  });
}


const handleUnban = (index, row) => {
  console.log("准备显示确认对话框");
  ElMessageBox.confirm(`确定解封用户 ${row.UName} 吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    console.log("用户点击了确定");
    return axios.post("/api/user/unban", qs.stringify({
      uId: row.UId
    }));
  }).then(res => {
    console.log("解封请求完成", res);
    if (res.data.code === 200) {
      ElMessage.success("解封成功！！");
      getUserList();
    } else {
      ElMessage.error("解封失败！请联系管理员处理！");
    }
  }).catch(error => {
    console.error("解封请求出错", error);
    // 这里你可能想要根据错误类型做不同的处理，比如取消操作的提示或者其他
    if (error && error.message === 'cancel') {
      ElMessage.info("已取消解封操作！");
    } else {
      ElMessage.error(`服务器错误!请与管理员联系！错误: ${error.message}`);
    }
  });
}

const handleDelete = (index, row) => {
  try {
    ElMessageBox.confirm(`确定删除用户 ${row.UName} 吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async ()=>{
      const res = await axios.post("/api/user/delete", qs.stringify({
        uId: row.uId
      }))
      if (res.data.code === 200) {
        ElMessage.success("删除成功！！")
        userList.value.splice(index, 1)
      }
    })
  }catch (e) {
    ElMessage.error(`服务器错误!请与管理员联系！错误: ${e.message}`)
  }
}

onMounted(() => {
  getUserList()
})
</script>

<template>
  <div class="user_container">
    <el-row>
      <el-col :span="18"></el-col>
      <el-col :span="6">
        <el-row :gutter="10">
          <el-col :span="20">
            <el-input v-model="qq" placeholder="请输入QQ号" clearable></el-input>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="getUserList">查询</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-table :data="userList">
      <el-table-column align="center" prop="UId" label="序号"></el-table-column>
      <el-table-column align="center" prop="UName" label="用户名"></el-table-column>
      <el-table-column align="center" prop="UQq" label="QQ号"></el-table-column>
      <el-table-column align="center" prop="UStatus" label="状态">
        <template #default="scope">
          <el-tag v-if="scope.row.UStatus === 0" type="success">正常</el-tag>
          <el-tag v-if="scope.row.UStatus === 1" type="danger">封禁中</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" v-if="scope.row.UStatus === 0" @click="handleBan(scope.$index, scope.row)">封禁</el-button>
          <el-button type="text" v-if="scope.row.UStatus === 1" @click="handleUnban(scope.$index, scope.row)">解封</el-button>
          <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :background="true"
        :page-sizes="[10, 20, 50, 100]"
        :total="totalUser"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>
.el-col{
  margin-bottom: 10px;
}
.el-table th, .el-table td {
  text-align: center !important;
}
</style>